<template>
  <view class="edit-phrase-container">
    <!-- 文本框 -->
    <view class="input-container">
      <textarea
        class="input"
        placeholder="请输入常用语"
        v-model="editedPhrase"
        maxlength="200"
        auto-height
      ></textarea>
    </view>

    <!-- 完成按钮 -->
    <view class="button-container">
      <button class="complete-button" @click="handleComplete">完成</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      editedPhrase: '', // 编辑后的常用语
      index: -1 // 当前编辑的常用语索引
    };
  },
  onLoad(options) {
    // 获取传递过来的参数
    this.index = options.index;
    this.editedPhrase = decodeURIComponent(options.phrase);
  },
  methods: {
    // 点击完成按钮
    handleComplete() {
      if (this.editedPhrase.trim() === '') {
        uni.showToast({
          title: '请输入常用语',
          icon: 'none'
        });
        return;
      }

      // 将编辑后的常用语传递回管理页面
      const pages = getCurrentPages();
      const prevPage = pages[pages.length - 2]; // 获取上一页实例
      if (prevPage && prevPage.$vm) {
        prevPage.$vm.phrases.splice(this.index, 1, this.editedPhrase); // 更新常用语
      }

      uni.navigateBack(); // 返回上一页
    }
  }
};
</script>

<style scoped>
.edit-phrase-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 20rpx;
  background-color: #fff;
}

.input-container {
  flex: 1;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
}

.input {
  width: 100%;
  font-size: 28rpx;
  line-height: 1.5;
}

.button-container {
  padding: 20rpx;
  background-color: #fff;
}

.complete-button {
  width: 100%;
  		height: 80rpx;
  		line-height: 80rpx;
      background: linear-gradient(90deg, #9A9AFF 0%, #D6D6FE 100%);
    	border-radius: 32px;
  		font-size: 32rpx;
  		color: #fff;
  		text-align: center;
  		pointer-events: auto; /* 确保用户交互正常 */
}

.complete-button::after {
  border: none;
}
</style>